<template>
  <div>
    <van-nav-bar
      :title="'分享赚钱'"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <div class="zhanwei"></div>

    <div class="shareImg">
      <img :src="canvasImg" alt="" v-if="!showImg" />
      <img
        class="beijing"
        src="../../assets/image/shareimg.png"
        alt=""
        v-if="showImg"
      />
      <!-- <qrcode class='shareqrcode'  :value="share" :size="size" type="img" v-if="showImg"></qrcode> -->
      <div
        id="qrcode"
        style="width: 200px;height: 200px;background-color: white;margin-top:20px;display"
        v-if="showImg"
      ></div>
      <img v-show="false" class="canvaslogo" src="../../assets/logo.png" />
      <img v-show="false" class="toplogo" src="../../assets/logo.png" />
    </div>
  </div>
</template>

<script>
import { NavBar } from "vant";
import { queryOemInfoApi } from "../../network/ApiServe";
import QRCode from "qrcodejs2";
export default {
  name: "sharePage",
  data() {
    return {
      showImg: true,
      regUrl: "",
      canvasImg: "",
      firstCanvas: true,
      phone: "",
      ip: "application.mingchetech.com",
    };
  },
  components: {
    [NavBar.name]: NavBar,
  },
  created() {
    this.phone = localStorage.getItem("phone");
    this.brandId = localStorage.getItem("brandId");
    this.getBrand();
  },
  beforeRouteEnter(to, from, next) {
    sessionStorage.setItem("routerFrom", from.name);
    next();
  },
  methods: {
    onClickLeft() {
      // let name = sessionStorage.getItem("routerFrom");
      // if (name == "null" || name == "link") {

      // } else {
      //   this.$router.push({ name: name });
      // }
      this.$router.go(-1);
    },
    // 获取品牌数据
    getBrand() {
      let _this = this;
      queryOemInfoApi(this.brandId).then((res) => {
        if (res.resp_code == "000000") {
          _this.regUrl =
            res.result.shareMainAddress +
            "?phone=" +
            this.phone +
            "&brand_id=" +
            this.brandId +
            "&ip=" +
            this.ip;
          console.log(_this.regUrl);
          this.getCanvas();
        } else {
          _this.$toast({ message: resp_message, position: "bottom" });
        }
      });
    },
    getPixelRatio(context) {
      let backingStore =
        context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio ||
        1;
      return (window.devicePixelRatio || 1) / backingStore;
    },
    getCanvas() {
      let _this = this;
      if (this.showImg == true) {
        this.$store.commit("showLoading");
        _this.$nextTick(() => {
          let style = document.querySelector(".shareImg").style;

          // style.opacity = 0
          // console.log(style)
          let width = document.querySelector(".shareImg").clientWidth;
          let qrcode = new QRCode("qrcode", {
            width: 200,
            height: 200,
            text: _this.regUrl,
          });
          console.log(width);
          let bili = width / 750;
          let height = bili * 1624;
          let num = 1000;
          let oneLogin = localStorage.getItem("onLogin");
          if (oneLogin) {
            num = 100;
          }
          setTimeout(() => {
            this.$store.commit("hideLoading");
            let img = document.querySelector(".beijing");
            let imgCode = document.querySelector("#qrcode img");
            // console.log(imgCode)
            let c = document.createElement("canvas");
            let cvs = c.getContext("2d");
            let ratio = _this.getPixelRatio(cvs);
            c.width = width * ratio;
            c.height = height * ratio;
            //兼容小米8 如果src 属性为null 重新赋予属性
            if (
              document.querySelector("#qrcode img").getAttribute("src") == null
            ) {
              document.querySelector("#qrcode img").style.visibility =
                "visible";
              document.querySelector("#qrcode canvas").style.visibility =
                "hidden";
              let canvas = document.querySelector("#qrcode canvas");
              let dataURL = canvas.toDataURL("image/png");
              document
                .querySelector("#qrcode img")
                .setAttribute("src", dataURL);
              console.log(canvas);
            }
            // c.width = width
            // c.height = height

            cvs.fillStyle = "#FFF";
            cvs.fillRect(0, 0, width, height);
            let codeTemp = 6; // 二维码外部边缘宽度
            let x = 234 * bili + codeTemp; //二维码的起始位置
            let y = 825 * bili + codeTemp;
            let imgCodeWidth = 286 * bili - codeTemp * 2; //二维码的宽
            let imgCodeHeight = 286 * bili - codeTemp * 2; //二维码的高度
            cvs.drawImage(img, 0, 0, parseInt(c.width), parseInt(c.height));
            cvs.drawImage(
              imgCode,
              x * ratio,
              y * ratio,
              parseInt(imgCodeWidth) * ratio,
              parseInt(imgCodeHeight) * ratio
            );
            let logoSrc = document.querySelector(".canvaslogo"); // 二维码图片logo
            let logoW = parseInt(imgCodeWidth) / 4;
            let logoH = parseInt(imgCodeHeight) / 4;
            let logoX = x + imgCodeWidth / 2 - logoW / 2;
            let logoY = y + imgCodeHeight / 2 - logoH / 2;
            cvs.drawImage(
              logoSrc,
              logoX * ratio,
              logoY * ratio,
              logoW * ratio,
              logoH * ratio
            );

            let topX = 316 * bili * ratio;
            let topY = 80 * bili * ratio;
            let topW = 118 * bili * ratio;
            let topH = 117 * bili * ratio;
            let topSrc = document.querySelector(".toplogo"); // 顶部图片logo
            cvs.drawImage(topSrc, topX, topY, topW, topH);

            let textX = c.width / 2; // 文案起始高度位置
            let nameT = 250 * bili * ratio;
            cvs.fillStyle = "#fff"; // 文字填充颜色
            cvs.textAlign = "center";
            cvs.font = 14 * ratio + "px bold sans-serif";
            cvs.fillText("100", textX, nameT);

            // let textY = 405 * bili* ratio // 名称其实位置
            // cvs.fillStyle = '#FFF';   // 文字填充颜色
            // cvs.textAlign = 'center'
            // cvs.font = 31 * ratio+'px bold sans-serif';
            // cvs.fillText('自用省钱 分享赚钱',textX,textY);

            // let nameY = 690 * bili* ratio
            // cvs.fillStyle = '#535353';   // 文字填充颜色
            // cvs.textAlign = 'center'
            // cvs.font = 14 * ratio+'px bold sans-serif';
            // cvs.fillText('智能信用卡账单管理',textX,nameY);
            //
            // let name2= 750 * bili* ratio
            // cvs.fillStyle = '#535353';   // 文字填充颜色
            // cvs.textAlign = 'center'
            // cvs.font = 16 * ratio+'px bold sans-serif';
            // cvs.fillText('5G钱包 还款无忧',textX,name2);
            //
            //
            // let name3= 1364 * bili* ratio
            // cvs.fillStyle = '#FFFFFF';   // 文字填充颜色
            // cvs.textAlign = 'center'
            // cvs.font = 21 * ratio+'px bold sans-serif';
            // cvs.fillText('长按二维码注册/下载',textX,name3);
            //
            // let name4= 1458 * bili* ratio
            // cvs.fillStyle = '#FFFFFF';   // 文字填充颜色
            // cvs.textAlign = 'center'
            // cvs.font = 21 * ratio+'px bold sans-serif';
            // cvs.fillText('多重管道收入 实现财富自由',textX,name4);

            let url = c.toDataURL("image/png");
            _this.showImg = false;
            _this.$nextTick(() => {
              _this.canvasImg = url;
            });
            if (_this.firstCanvas === true) {
              _this.firstCanvas = false;
              cvs.clearRect(0, 0, c.width, c.height); // 清除画布
              _this.showImg = true;
              _this.getCanvas(); // 二次绘图
            }
          }, num);
        });
      }
    },
  },
};
</script>

<style scoped>
.zhanwei {
  height: 46px;
}
.shareImg img {
  width: 100%;
  height: auto;
}
</style>